<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="demo1"></div>


    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    
    <script type="text/babel">
        // 创建组件
        class MyComponent extends React.Component{
            state = {
                isHot: true
            }
            render(){
                const {isHot} = this.state
                return (
                    <div>
                        <h1>今天天气很 {isHot?'炎热':'凉爽'}</h1>
                        <input ref={curNode => {this.input = curNode;console.log('@',curNode)}} type='text' placeholder='请输入内容'/>&nbsp;
                        <button onClick={this.click}>获取input的内容</button>
                        <span ref='result'></span>
                        <button onClick={this.changeWeather}>点击切换天气</button>
                        <input type='text' onBlur={this.blur} placeholder='失去焦点提示文字'/>
                    </div>
                )
            }
            click = ()=>{
                //想要获取input框的值, 需要获取input框标签,  可以在input框上添加ref属性
                console.log(this)
                console.log(this.input)
                alert(this.input.value)
            }
            changeWeather = ()=>{
                const {isHot} = this.state
                this.setState({isHot: !isHot})
            }
            // 对于发生事件发生的元素和事件使用的元素是同一个时, 不推荐使用ref, 使用event获取数据
            blur = (event)=>{
                alert(event.target.value)
                event.target.value = ''
            }
        }

        // 渲染组件到页面
        ReactDOM.render(<MyComponent/>, document.getElementById('demo1'))
    </script>



</body>
</html>